<template>
  <el-date-picker
    v-bind="$attrs"
    v-model="time"
    type="datetimerange"
    @change="change"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    value-format="yyyy-MM-dd HH:mm:ss"
  >
  </el-date-picker>
</template>

<script>
export default {
  name: 'DateRange',
  props: {
    startTime: {
      type: String,
      default: ''
    },
    endTime: {
      type: String,
      default: ''
    }
  },
  computed: {
    time: {
      get() {
        if (this.startTime && this.endTime) {
          return [this.startTime, this.endTime]
        }
        return []
      },
      set(v) {
        const time = v || ['', '']
        let [s, e] = time
        if (s == e) {
          e = e.replace('00:00:00', '23:59:59')
        }
        this.$emit('update:startTime', s)
        this.$emit('update:endTime', e)
      }
    }
  },
  methods: {
    change(t) {
      this.$emit('change', t)
    }
  }
}
</script>
